<template>
  <div>
    <button @click="$store.dispatch('asyncAdd',{num:10,age:20})">+</button>
    {{$store.state.count}}
    <button @click="$store.dispatch('asyncLittle',1)">-</button>
    <hr />

    <button @click="$store.dispatch('asyncAdd',{num:10,age:20})">+</button>
    {{count}}
    <button @click="$store.dispatch('asyncLittle',1)">-</button>

    <hr />
    <router-link to="/router1/1">qwer-1</router-link>
    <router-link to="/router1/2">qwer-1</router-link>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["asyncInc"]),
    ...mapActions(["asyncDec"]),
  },
  computed: {
    ...mapState(["count"]),
  },
};
</script>

<style scoped>
</style>